<template>
  <el-dialog v-model="dialogVisible" draggable destroy-on-close append-to-body v-bind="$attrs">
    <template #title>
      <h6>{{ title }}</h6>
    </template>
    <slot />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handleConfirm">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// TODO 这不是我想要的效果 我希望的效果是 点击一个按钮 会弹出一个弹窗   需要重新处理这个组件
interface IProps {
  visible: boolean
  title?: string
}
const props = defineProps<IProps>()
const emits = defineEmits(['confirm'])
const obj = reactive({
  dialogVisible: false,
})
const handleConfirm = () => {
  obj.dialogVisible = true
  emits('confirm', () => {
    obj.dialogVisible = false
  })
}
let { dialogVisible } = toRefs(obj)
</script>

<style scoped></style>
